<!--
 * @author luguoxiang
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <slot name="custom" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
<!--  照片墙  -->
    <view v-if="listType === 'list'"  class="lg-uploader lg-uploader-list">
      <view v-if="!disabled" class="lg-uploader-trigger" @tap="choose">
        <slot name="trigger" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
          <view class="lg-uploader-btn">上传文件</view>
        </slot>
      </view>
      <slot v-if="!disabled" name="tips" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
        <view class="lg-uploader-tips">{{ tips }}</view>
      </slot>
      <slot name="files" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
        <view class="lg-uploader-files">
          <view v-for="x in files" :key="x.id" class="lg-uploader-item" :class="'lg-uploader-status-' + x.status">
            <view class="lg-uploader-name">{{ x.name }}</view>
            <!--  进度和状态  -->
            <view class="lg-uploader-status">
              <uni-icons v-if="x.status === 1" type="upload" />
              <view v-else-if="x.status === 2" class="lg-uploader-percent">{{ x.percent }}%</view>
              <uni-icons v-else-if="x.status === 3" type="close" color="red" />
              <uni-icons v-else type="checkbox" color="green" />
            </view>
            <view v-if="!disabled" class="lg-uploader-ops">
              <uni-icons type="trash" size="30" @tap.stop="removeFile(x)"/>
            </view>
            <view v-if="x.status === 2" :style="{ width: x.percent + '%' }" class="lg-uploader-progress"></view>
          </view>
        </view>
      </slot>
    </view>
<!--  默认样式  -->
    <view v-else class="lg-uploader lg-uploader-default">
      <slot name="files" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
        <view class="lg-uploader-files">
          <view v-for="x in files" :key="x.id" class="lg-uploader-item" :class="'lg-uploader-status-' + x.status" @tap="preview(x)">
            <view class="lg-uploader-box" :style="{ 'background-image': `url(${getFileAccessAuthUrl(x.url, 'm')})`  }">
              <view v-if="x.status" class="lg-uploader-status">
                <uni-icons v-if="x.status === 1" type="upload" />
                <view v-else-if="x.status === 2" class="lg-uploader-percent">{{ x.percent }}%</view>
                <uni-icons v-else-if="x.status === 3" type="close" color="red" />
              </view>
              <view v-if="x.status === 2" :style="{ width: x.percent + '%' }" class="lg-uploader-progress"></view>
            </view>
            <view v-if="!disabled" class="lg-uploader-ops" @click.stop>
              <uni-icons type="clear" size="30" @tap="removeFile(x)"/>
            </view>
          </view>
          <view v-if="!disabled" class="lg-uploader-item lg-uploader-trigger" @tap="choose">
            <view class="lg-uploader-box">
              <slot name="trigger" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
                <uni-icons type="plus" size="50" color="#ddd"/>
              </slot>
            </view>
          </view>
        </view>
      </slot>
      <slot v-if="!disabled" name="tips" :files="files" :choose="choose" :upload="upload" :remove="removeFile">
        <view class="lg-uploader-tips">{{ tips }}</view>
      </slot>
    </view>
  </slot>
</template>

<script setup lang="ts">
import {watch} from "vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {useUploader} from "@/soar/hooks/upload";
import {getFileAccessAuthUrl} from "@/soar/utils/file";

interface Props {

  type?: 'image' | 'video' | 'all';

  extension?: string[];

  count?: number;

  sizeType?: 'original' | 'compressed';

  sourceType?: ['album' | 'camera'];

  crop?: any;

  maxDuration?: number;

  /**
   * 文件大小限制
   */
  size?: number | string;

  /**
   * 值类型
   */
  valueType?: 'default' | 'infoList' | 'urlList' | 'url' | 'info';

  /**
   * 是否手动上传
   */
  manual?: boolean;

  modelValue?: any;
  listType?: 'default' | 'list';
  tips?: string;
  disabled?: boolean;
}
const props = defineProps<Props>();
const emits = defineEmits(['update:modelValue', 'change']);

const { files, upload, choose, remove, updateValue, preview } = useUploader(props, (value: any) => {
  emits('update:modelValue', value);
  emits('change', value);
})

watch(() => props.modelValue, updateValue, { immediate: true, deep: true },);

function removeFile(e: any) {
  if (props.disabled) {
    return
  }
  remove(e)
}

defineExpose({
  upload,
  choose,
  remove,
})
</script>
<script lang="ts">
export default {
  name: 'LgUploader'
}
</script>
<style lang="scss" scoped>
.lg-uploader-list {
  .lg-upload-files {

  }
  .lg-uploader-btn {
    border-radius: 50rpx;
    background-color: $uni-color-primary;
    color: $uni-bg-color;
    line-height: 36px;
    padding: 0 24px;
    display: inline-block;
  }
  .lg-uploader-item {
    display: flex;
    align-items: center;
    padding: 2rpx 0;
    margin: 4rpx 0;
    background-color: $uni-bg-color;
  }
  .lg-uploader-name {
    flex: 1;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lg-uploader-percent {
    font-size: 12px;
  }
}

.lg-uploader-default {
  .lg-uploader-files {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
  }
  .lg-uploader-item {
    width: 25%;
    height: 80px;
    padding: 4px;
  }
  .lg-uploader-box {
    position: absolute;
    inset: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中 */
  }
  .lg-uploader-ops {
    position: absolute;
    right: -4px;
    top: -4px;
  }
  .lg-uploader-trigger {
    .lg-uploader-box {
      border-style: dashed;
    }
  }
}


.lg-uploader {
  .lg-uploader-item {
    position: relative;
  }
  .lg-uploader-status-0 {

  }
  .lg-uploader-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: $uni-color-primary;
    overflow: hidden;
    &:before {
      position: absolute;
      bottom: 0;
      right: 0;
      content: '';
      height: 2px;
      width: 25%;
      background: linear-gradient(to right, $uni-bg-color, $uni-color-primary);
      display: block;
      animation: progress 2s infinite;
    }
  }
  .lg-uploader-tips {
    color: #888;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 0;
  }

  @keyframes progress {
    0% {
      transform: translateX(-400%);
    }
    100% {
      transform: translateX(100%);
    }
  }
}
</style>